<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>办事指南</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/excutive_housekeeper/law_guide.css" />
		<script src="../../js/statistics.js"></script>
		<style>
			.header a{
				color:#fff;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left action-back"></a>
			<h1 class="mui-title">行政办事</h1>
		</header>
		<div class='mui-content'>
			<div class='mui-row row_title'>
				<div class='mui-col-xs-4 guide_title guide_1' id="guide_1">
					<li class='title_1 click_li liline'>个人办事</li>
				</div>
				<div class='mui-col-xs-4 guide_title guide_2' id="guide_2">
					<li class='title_2'>企业办事</li>	
				</div>
				<div class='mui-col-xs-4 guide_title guide_3' id="guide_3">
					<li class='title_3'>服务部门</li>
				</div>
			</div>
			<div class='main'>
				
				
			</div>
		</div>
	
		<script src='../../plugins/jquery/jquery-3.1.0.min.js'></script>
		<script src="../../plugins/mui/mui.min.js"></script>
		<script src="../../js/getApiToken.js"></script>
		<script type="text/javascript" src="../../plugins/template/template.js" ></script>
		<script type="text/javascript" src="../../js/md5.js" ></script>
		<!--<script type="text/javascript" src="../../js/judge.js" ></script>-->
		<script id="list" type="text/html">
			<ul  class='main_1 mui-table-view' id="main_1">
				{{each data.person as value i}}
				<li class='mui-table-view-cell' onclick="openNewWindow({{value.id}},'{{value.title}}')">
					 <a class="mui-navigate-right">
				        <img src="{{baseUrl}}{{value.icon}}">
						<span>{{value.title}}</span>
				    </a>	
				</li>
				{{/each}}
			</ul>
			<ul class='main_2  mui-table-view ul_none' id="main_2">
				{{each data.company as value i}}
				<li class='mui-table-view-cell' onclick="openNewWindow({{value.id}},'{{value.title}}')">
					<a class="mui-navigate-right">
				        <img src="{{baseUrl}}{{value.icon}}">
						<span>{{value.title}}</span>
				    </a>	
				</li>
				{{/each}}
			</ul>
			<ul class='main_3  mui-table-view ul_none' id="main_3">
				{{each data.department as value i}}
				<li class='mui-table-view-cell'  onclick="openAnotherWindow({{value.id}},'{{value.title}}')">					
					<p>{{value.title}}</p>
				</li>
				{{/each}}
			</ul>
		</script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function(){
				myAnotherAjax('administration/administration/guide','get',{},function(data){
					if(data.success){
						initData(data);
					}else{
						mui.alert("网络错误，请重新尝试");
					}
				})
			});
			$(function(){
				$(".guide_title").on('tap',function(e){
					var type = $(this).attr("id");
					type = type.substr(type.length-1,1);
					$(this).find("li").addClass("click_li liline").parent().siblings().find("li").removeClass("click_li liline");
					$(".main").find("ul").each(function(){
						var id = $(this).attr("id");
						id = id.substr(id.length-1,1);
						if(type == id){
							$(this).show().siblings().hide();
						}
					})
					e.preventDefault();
				})
			});
			function initData(data){
				var list = {
					data:data,
					baseUrl:_baseUrl
				}
				console.log(list);
				var html = template('list',list);
				$(".main").append(html);
			}
			//打开新页面一
			function openNewWindow(id,title){
				mui.openWindow({
					url:'detail.html',
					waiting:{
				      		autoShow:true,//自动显示等待框，默认为true
				      		title:'正在加载...',//等待对话框上显示的提示内容
  					},
  					show:{
  						autoShow:true,
  						aniShow:'fade-in'
  					},
					extras:{
						pageId:id,
						pageTitle:title
					}
				})
			}
			//打开新页面二
			function openAnotherWindow(id,title){
				console.log(title)
				mui.openWindow({
					url:'service.html',
					waiting:{
				      		autoShow:true,//自动显示等待框，默认为true
				      		title:'正在加载...',//等待对话框上显示的提示内容
  					},
  					show:{
  						autoShow:true,
  						aniShow:'fade-in'
  					},
					extras:{
						pageId:id,
						pageTitle:title
					}
				})
			}
		</script>
	</body>
</html>